<template>
    <view>
        <view class="pagination-placeholder"></view>
        <view class="pagination-wrap u-flex">
            <view
                class="btn u-flex-1"
                :class="[{ active: !showNextButton }]"
                @click="prev"
                v-if="showPrevButton"
                ><u-icon name="arrow-leftward" size="30" class="icon"></u-icon>上一题</view
            >
            <view class="btn active u-flex-1" @click="next" v-if="showNextButton"
                >下一题<u-icon name="arrow-rightward" size="30" class="icon"></u-icon
            ></view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        // 是否显示上一题的按钮
        showPrevButton: {
            type: Boolean,
            default: false,
        },
        // 是否显示下一题的按钮
        showNextButton: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        // 上一题
        prev(state) {
            this.$emit('prev')
        },
        // 下一题
        next(state) {
            this.$emit('next')
        },
    },
}
</script>
<style lang="scss" scoped>
.pagination-placeholder {
    width: 100%;
    height: calc(98rpx + var(--window-bottom));
}
.pagination-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    height: 98rpx;
    background: #ffffff;
    box-shadow: 0 2rpx 14rpx 0 rgba(0, 0, 0, 0.08);
    padding-bottom: var(--window-bottom);
    .btn {
        font-size: 30rpx;
        color: #909399;
        line-height: 80rpx;
        text-align: center;
        box-sizing: border-box;
    }
    .icon {
        margin: 0 10rpx;
    }
    .active {
        @include text-color();
    }
}
</style>
